 <template>
  <div class="personal-center page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <div class="head-box">
      <navbar :title="title"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">

      <div class="head">
        <div class="setIcon" v-show="showSearch">
          <img src="../../assets/image/icon_search.png" @click="searchMsg" alt="">
        </div>
        <div class="search" v-show="!showSearch">
          <form action="javascript:return true">
            <input type="search" placeholder="请输入搜索内容" v-model.trim="value" @keyup.enter="searchVideo()">
          </form>
          <span @click="searchMsg">取消</span>
        </div>
        <div class="user">
          <img class="user-img" :src="userInfo.images" alt="">
          <div class="userInfo">
            <div class="userName">
              {{userInfo.authorName}}
              <img :src="userInfo.platImg" alt="">
            </div>
          </div>
        </div>
        <div class="introduce" v-html="userInfo.remark"></div>
      </div>
      <div class="video-box">
        <image-fall v-if="items" :items="items"></image-fall>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
  import imageFall from '../../components/common/imageFall.vue'
  import { getHostMsgVideo, getHostPlatform } from './api'
  export default{
    components: {
      imageFall
    },
    data() {
      return {
        title : "主播详情",
        userInfo: {
          // id:'111',
          // authorName: '东哥说车',
          // images: 'https://img0.baidu.com/it/u=3332467979,4048605383&fm=26&fmt=auto',
          // tag: ['懂车帝'],
          // remark: `8年汽车评测达人<br>
          //             大中华区汽车资源总裁<br>
          //             全国帮寻低价优质汽车车源<br>
          //             每晚不定时直播 发布特惠团购车型<br>
          //             每晚不定时直播 发布特惠团购车型<br>
          //             每晚不定时直播 发布特惠团购车型<br>
          //              `
        },
        items: null,
        showSearch: true,
        value: '',
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
      }
    },
    methods: {
      // 展示搜索框
      searchMsg() {
        this.showSearch = !this.showSearch
        if(this.showSearch === true) {
          this.value = ''
        }
      },
      // 搜索视频
      searchVideo() {
        console.log(this.value)
        this.items = null
        this.getData()
      },
      // 返回上一个页面
      goback() {
        this.$router.go(-1)
      },
      // 获取数据
      async getData() {
        // 获取主播信息 ?zId=${id}&limit=1&page=1
        this.value = this.value.replace(/\s+/g,"")
        let msg = {
          zId: this.$route.query.id,
          limit: 20,
          page: 1,
          remark: this.value,
          title: this.value,
        }
        const {data} = await getHostMsgVideo(msg)
        let platformId = data.tbCelebrityManagementC.platformId
        // 获取主播平台信息
        const res = await getHostPlatform(platformId)
        data.tbCelebrityManagementC.platform = res.data.platform
        this.userInfo = data.tbCelebrityManagementC
        this.userInfo.platImg = res.data.images
        // 处理主播视频信息
        if (data.returnCelebrityVideo === [] || data.returnCelebrityVideo === null) {
          console.log('该主播无视频')
        } else {
          let videoItem = data.returnCelebrityVideo.map(item => {
            return {
              userImg: data.tbCelebrityManagementC.images,
              userName: data.tbCelebrityManagementC.authorName,
              from: res.data.images,
              tag: item.tbTagCList.map(item => {
                return item.tagName
              }),
              img: item.tbVideoManagementCS.videoS,
              title: item.tbVideoManagementCS.videoTitle,
              id: item.tbVideoManagementCS.id,
              videoImg: item.tbVideoManagementCS.cover
            }
          })
          console.log(videoItem)
          this.items = videoItem
        }
        // console.log(this.items)
      },
      // 获取路由链接上拼接的token值
      getTokenInUrl() {
        var url = window.location.href;
        if (url.indexOf("token") > 0) {
          let getTokenParams = window.location.href.split("token=")[1];
          getTokenParams=getTokenParams.split("&")[0];
          if (getTokenParams.length >= 32) {
            getTokenParams = getTokenParams.substr(0, 32);
            console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
            sessionStorage.setItem("token", getTokenParams);
          }
        }
      }
    },
    created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      // 修改页面标题
      document.title = "主播详情"
      // 获取路由链接上拼接的token值
      this.getTokenInUrl()
      // console.log(this.$route.query.id)
      this.getData()
    },
    mounted() {
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
    }
}
</script>

<style scoped lang="less">
  .search{
    padding-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input{
      width: 75vw;
      border: none;
      height: 28px;
      border-radius: 18px;
      background: #F8F8F8;
      padding-left: 5vw;
    }
    input::-webkit-input-placeholder{
      color: #B3B3B3;
    }

  }
  .blank{
    margin-bottom: 12vh;
  }
  .personal-center{
    .head-box{
      .head{
        box-sizing: border-box;
        height: 245px;
        padding: 16px 16px 16px 16px;
        background-image: url('../../assets/image/bg.png');
        background-size: 100%;
        overflow-y: scroll;
        .setIcon{
          color: #333333;
          // display: block;
          height: 20px;
          padding-bottom: 22px;
          .van-icon{
            font-size: 18px;
          }
          img{
            float: right;
            font-size: 20px;

          }
        }
        .user{
          display: flex;
          align-items: center;
          padding-bottom: 15px;
          .user-img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            box-shadow: 0px 4px 8px 0px rgba(25, 25, 25, 0.1);
          }
          .userInfo{
            margin-left: 13px;
            .userName{
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              padding-bottom: 5%;
              img{
                width: 40px;
                height: 20px;
              }
            }
            .userMsg{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }
          }
        }
        .introduce{
          white-space: pre-line;
          font-size: 14px;
          height: 80px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
          overflow: hidden;
          overflow-y: scroll;
        }

      }
    }
  }
  .video-box{
    margin: 16px;
  }
</style>
